<template>
	<view>
		<view class="u-demo-block" v-for="(item, indexs) in diaryList" :key="item.commentId">
		    <u-swiper style="height:300px" :list="item.url" @change="e => currentNum = e.current" :autoplay="false" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text" >{{ currentNum + 1 }}/{{ item.url.length }}</text>
				</view>
			</u-swiper>
			<view>
			<u-row customStyle="margin-bottom: 10px;margin-top:20px">
				<u-col span="2" style="margin-left:5%">
					<view class="demo-layout bg-purple">
						<u-avatar :src="src" shape="circle"></u-avatar>
					</view>
				</u-col>
				<u-col span="4">
					<view class="demo-layout bg-purple-light">
						<p style="font-weight: bold;font-size: 14px;">{{item.userName}}</p>
						<p style="font-size: 13px;">共{{diaryList.length}}篇日记</p>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple-dark">
						<button @click="getFollowUserId()" class="span_2" v-for="(item, index) in followUser" :key="index" >{{item.delFlag == 0 ?'已关注':'+关注'}}</button>
						<button @click="getFollowUserId()" class="span_2" v-if="foll" >关注</button>
						<!-- <button class="span_2" v-for="(item, index) in title" :key="index" >{{item.likes=='0'?'已关注':'+关注'}}</button> -->
					</view>
				</u-col>
			</u-row>
			</view>
			<view style="margin-left:6%">
				<view style="">{{dateFormats(item.diaryRecordTime)}}</view>
				<view style="font-size: 13px;width:90%">{{item.diaryRecordContent}}</view>
			</view>
			<view>
				<u-row class="row_1">
					<p>评论</p>
				</u-row>
				<u-row style="width: 100%;padding-bottom: 30px;">
					<view class="divv">
						<u-row   v-for="(item, index) in commentById" :key="index">
							<view  v-show="isOpen || index < max" class="divv">
							<view>
								<view class="bhu">
									<image :src="imgUrl" class="img_1"></image>
									<view>
										<text class="text1">{{item.userName}}</text>
									</view>
									<view>
										<text class="text3">{{item.commentContent}}</text>
									</view>
								</view>
								<text style="font-size: 24rpx;margin-left:20px">{{dateFormats1(item.commentTime)}}</text>
								<view style="margin-left:60%;margin-top:0px">
									<view style="float:left">
										<text style="margin-left:0%;" @click="replay(item)">回复</text>
									</view>
									<view style="margin-left:50px">
										<p class="text2" v-show="item.kudosWhether == 0">
											<u-icon style="float:left;margin-top:3px"  name="heart-fill" color="#575757" size="18" @click="likes(item)"></u-icon>
											<span style="margin-left:6px;font-size:10px;">{{item.kudosNum}}</span>
										</p>
										<p class="text2" v-show="item.kudosWhether == 1 || item.kudosWhether == null">
										   <u-icon style="float:left;margin-top:3px" name="heart" color="#575757" size="18"  @click="likes(item)"></u-icon>
											<span style="margin-left:6px;font-size:10px;">{{item.kudosNum}}</span>
										</p>
									</view>
								</view>
								<view style="margin-top:10px;margin-left:17%">
									<text class="comment_seeP" v-if="item.childs.length != 0 " style="font-size: 14px;" @click="seeComment(item)">展开回复</text>
								</view>
							</view>
							<view style="width:100%">
								<u-row v-for="(childs,index) in item.childs " :key="index"  v-show="childs.commentPid === seeCommentId">
									<view class="bhu2">
										<image :src="imgUrl" class="img_2"></image>
										<view style="font-size: 13px;font-weight: bold;">
											<text style="font-size: 13px;font-weight: bold;margin-left:10px;float:left">{{childs.userName}}</text>
											<u-icon name="play-right-fill" color="#B7B7B7" size="15" style="float:left"></u-icon>
											{{item.userName}}
										</view>
										<view>
											<text style="margin-left:10px">{{childs.commentContent}}</text>
										</view>
									</view>
									<view style="margin-top:25px;margin-left:50px">
										<text style="font-size: 24rpx;margin-left:10px;">{{dateFormats1(item.commentTime)}}</text>
										<view style="">
											<text style="margin-left:40px;float:left" @click="replay(item)">回复</text>
										</view>
										<view style="margin-left:50px;">
											<p  v-show="childs.kudosWhether == 0">
												<u-icon style="float:left;margin-top:3px"  name="heart-fill" color="#575757" size="18" @click="likes(childs)"></u-icon>
												<span style="margin-left:6px;font-size:10px;">{{childs.kudosNum}}</span>
											</p>
											<p  v-show="childs.kudosWhether == 1 || childs.kudosWhether == null">
											   <u-icon style="float:left;margin-top:3px" name="heart" color="#575757" size="18"  @click="likes(childs)"></u-icon>
												<span style="margin-left:6px;font-size:10px;">{{childs.kudosNum}}</span>
											</p>
										</view>
									</view>
								</u-row>
								<view style="margin-left:13%;margin-top:5px">
									<u-row v-if="item.commentId === stowCommentId">
									    <p style="color:darkgrey;" @click="stowSecondLevelComment">收起</p>
									</u-row>
								</view>
							</view>
							</view>
						</u-row>
						<view style="margin-top:30px" class="bottomAdd" v-show="commentById.length >= max" @tap="more">查看更多</view>
					</view>
				</u-row>
				<div style="width: 100%;height: 50px;background: white;">
				<view style="position:fixed;bottom: 50px;width: 100%;height: 40px;background: white;">	
				<image :src="imgUrl" style="float:left;width: 30px;height:30px;margin-left:10px"></image>
				<!-- <u--input
				    placeholder="添加评论"
				    border="surround"
				    v-model="commenText"
				    @change="changePl(item)"
					shape="circle"
					style="width:208px;float:left;"
				  ></u--input> -->
				  <u--input
				    placeholder="添加评论"
				    border="surround"
				    v-model="commenText"
				  	shape="circle"
				  	style="width:208px;float:left;"
				    ></u--input>
				  <u-button style="border-radius: 20px 20px 20px;width:60px;height:30px;float:left" @click="saveComment(item)">发布</u-button>
				  </view>
				</div>
				  <view>
						<u-keyboard ref="uKeyboard" @cancel="ss" @close="ss" mode="car" :show="show">
							<u-row>
							<u-col :span="6">
								<u--input
									placeholder="添加评论"
									border="surround"
									v-model="commenTexts"
									shape="circle"
									cursor-spacing="10"
									style="width:290px;background-color: white;float:left"
								  ></u--input>
							</u-col>
							<u-col :span="10">
								<u-button v-show="isShowf" style="border-radius: 20px 20px 20px;width:60px;height:30px;float:left" @click="saveComment(item)">发布</u-button>
								<u-button v-show="isShowh" style="border-radius: 20px 20px 20px;width:60px;height:30px;" @click="saveReplyComment(item)">回复</u-button>
							</u-col>
							</u-row>
						</u-keyboard>
				  </view>
				<!--  <u-tabbar
				  	:value="value6"
				  	@change="name => value6 = name"
				  	:fixed="true"
				  	:placeholder="true"
				  	:safeAreaInsetBottom="true"
				  >
				  	<u-tabbar-item text="评论" icon="chat" ></u-tabbar-item>
				  	<u-tabbar-item text="喜欢" icon="heart" ></u-tabbar-item>
				  	<u-tabbar-item text="收藏" icon="star" ></u-tabbar-item>
				  	<u-tabbar-item text="转发" icon="share-square" ></u-tabbar-item>
				  </u-tabbar> -->
				  <view style="position:fixed;bottom: 0px;width: 100%;height: 52px;background: white;">
					  <u-tabbar-item style="float: left;margin-left: 60px;width:30px" text="评论" icon="chat" ></u-tabbar-item>
					  <span style="float: left;margin-left: 1px;font-size: 13px;margin-top:3px">{{diaryListOne.diaryRecordNumber}}</span>
					  <u-tabbar-item style="margin-left: 60px;float: left;width:30px" text="喜欢" icon="heart" ></u-tabbar-item>
					  <span style="float: left;margin-left: 1px;font-size: 13px;margin-top:3px">{{diaryListOne.diaryRecordWhether}}</span>
					  <!-- <u-tabbar-item style="float: left;" text="收藏" icon="star" ></u-tabbar-item> -->
					  <u-tabbar-item style="float: left;margin-left:50px" text="转发" icon="share-square" ></u-tabbar-item>
				  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 回复输入框
				commenTexts: '',
				// 底部导航栏
				value6: 0,
				// 评论输入框
				commenText: '',
				isShowf: false,
				isShowh: false,
				// 弹窗键盘
				show: false,
				max: 3, //默认展示几条数据
				isOpen: false, // 是否展开全部信息的标识 Boolean 默认false
				imgUrl: 'http://c.svner.cn/19.jpg',
				title:[
				  {
					user_id:"0",
					likes:"1"
				  }
				],
				// 日记查询
				diaryList: [],
				// 轮播指示器
				currentNum: 0,
				// 日记id
				id: "",
				// 查询评论
				commentById: [],
				// 评论对象
				commentc: {},
				// 评论内容
				commentText: '',
				// 收起评论id
				stowCommentId:0,
				// 查看评论id
				seeCommentId: 0,
				// 默认收起为false
				stow: false,
				// 评论id
				commentId: 0,
				// 点赞对象
				kudosNum: {},
				// 点赞、评论量
				diaryListOne: [],
				// 关注
				followUser: [],
				foll: true
			}
		},
		onLoad(option) {
			this.id = option.dailyRecordId
			// 日记查询
			this.getDiaryById()
			// 查询日记评论
			this.getCommentById()
			// 查询日记
			this.getDiaryByIdOne()
			// 查询关注
			this.getFollowUser()
		},
		methods: {
			// 查询关注
			getFollowUser(){
				var userId = uni.getStorageSync('administrator').userId
				this.$axios({
					url: '/contents/getFollowUser?id=' + this.id +"&userId="+userId,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.followUser = res.data.object
							if( res.data.object !==undefined &&  res.data.object.length > 0 ){
								this.foll = false
							}
						}
					}
				})
			},
			// 新增关注
			getFollowUserId(){
				var userId = uni.getStorageSync('administrator').userId
				this.$axios({
					url: '/contents/getFollowUserId?id=' + this.id +"&userId="+userId,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.getFollowUser()
						}
					}
				})
			},
			// 查询日记
			getDiaryByIdOne(e){
				uni.request({
					url: "http://localhost:8090/contents/getDailyRecordIdOne?id=" + this.id ,                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.diaryListOne = res.data.object
					},                  
				});
			},
			ss(){
				this.show = false
			},
			open() {
			        // console.log('open');
			  },
			  close() {
				this.show = false
				// console.log('close');
			  },
			// 评论弹窗
			changePl(item){
				// this.show = true
				// this.isShowf = true
				// this.isShowh = false
				this.commentc.commentDiaryRecordId=item.dailyRecordId
				this.getCommentById(item)
			},
			// 查看更多展示20条
			more() {
				this.max += 5; //每次点击加1条
			},
			// 收起二级评论
			stowSecondLevelComment(){
			    this.seeCommentId = 0
			    this.stowCommentId = 0
			    this.stow = false
			},
			// 评论点赞
			likes(item, index) {
				this.kudosNum.kudosUserId = uni.getStorageSync('administrator').userId
				this.kudosNum.kudosDictionaries = 3
				this.kudosNum.kudosWholeId = item.commentId
				item.commentDiaryRecordId
				uni.request({
					url: "http://localhost:8090/contents/getCommentKudosById/" + this.kudosNum.kudosWholeId +"/"+this.kudosNum.kudosDictionaries+"/"+this.kudosNum.kudosUserId+"/"+item.commentDiaryRecordId,
					method: 'get',
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 200){
							this.getCommentById()
						}
					},     
				});	
			},
			// 回复弹窗
			replay(item){
				this.show = true
				
				this.isShowh = true
				this.isShowf = false
				this.commentc.commentPid = item.commentId
				this.commentc.commentDiaryRecordId=item.commentDiaryRecordId
				// console.log(replayName);	
			},
			// 新增回复评论
			saveReplyComment(item){
				this.commentc.commentContent = this.commenTexts
				this.commentc.commentPid
				this.commentc.commentDictionaries = '1'
				this.commentc.commentDiaryRecordId
				this.$axios({
					url: '/contents/saveComment',
					method: 'post',
					data: JSON.stringify(this.commentc),
					success: (res) => {
						if (res.data.code === 200) {
							this.getDiaryById()
							this.getCommentById()
							this.commentc = {}
							this.commenTexts = ''
						}
					}
				})
			},
			// 点击查看评论时
			seeComment(comment){
			    this.stowCommentId = comment.commentId
			    this.seeCommentId = comment.commentId
			},
			// 新增评论
			saveComment(item){
				this.commentc.commentDiaryRecordId=item.dailyRecordId
				this.commentc.commentContent = this.commenText
				this.commentc.commentDictionaries = '1'
				// this.commentc.commentDiaryRecordId
				this.commentc.commentPid = 0
				this.$axios({
					url: '/contents/saveComment',
					method: 'post',
					data: JSON.stringify(this.commentc),
					success: (res) => {
						if (res.data.code === 200) {
							// this.getDiaryById()
							this.getCommentById()
							this.commenText = ''
						}
					}
				})
			},
			// 查询日记评论
			getCommentById(item){
				this.commentById = []
				this.commentc.commentDictionaries = '1'
				var userId = uni.getStorageSync('administrator').userId
				this.$axios({
					url: '/contents/getCommentById?id=' + this.id +"&commentDictionaries="+this.commentc.commentDictionaries+"&userId="+userId,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.commentById = res.data.object
						}
					}
				})
			},
			// 查询日记
			getDiaryById(e){
				uni.request({
					url: "http://localhost:8090/contents/getDailyRecordFileById/" + this.id,                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.diaryList = res.data.object
					},                  
				});
			},
			// 设置时间格式s
			dateFormats1(time) {
			    var date=new Date(time);
			    var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
				* */
			    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
			    return year+"-"+month+"-"+day+" "+hours+":"+minutes
			},
			// 设置时间格式s
			dateFormats(time) {
			    var date=new Date(time);
			    var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
				* */
			    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
			    return month+"-"+day;
			}
		}
	}
</script>

<style lang="scss">
	.comment_seeP:hover{
	    color:#31c27c;
	}
	.comment_seeP{
	    color: #999;
	    font-size:14px;
	    cursor: pointer;
	}
	// 子集
	.bhu2{
		width:30%;
		height: 35px;
		float:left;
		margin-top:23px;
		margin-left:10%;
	}
	.img_2{
		width: 70rpx;
		height: 70rpx;
		margin-bottom:20px;
		border-radius: 50%;
		margin-left:7%;
		float: left;
	}
	// 父级
	.bottomAdd {
		display: flex;
		justify-content: center;
		color: rgb(94, 94, 94);
		padding-bottom: 10px;
	}
	.img_1{
		width: 80rpx;
		height: 80rpx;
		margin-bottom:20px;
		border-radius: 50%;
		margin-left:7%;
		float: left;
	}
	.bhu{
		width:50%;
		height: 30px;
		float:left;
	}
	.text1{
		margin-bottom: 20px;
		margin-left:10px;
		font-weight: bold;
		font-size: 14px;
	.text2{
		// float: right;
		// margin-bottom: 20px;
	}
	
	}
	.text3{
		margin-left:10px;
	}
	.divv{
		width: 100%;
		height: 100%;
		margin-top: 25px;
	}
	.uu1{
		float: left;
	}
	.row_1{
		width: 100%;
		margin-left:5%;
		margin-top:20px;
		font-weight: bold;
	}
	
	// 轮播图
	.span_2{
		height: 25px;
		width: 80px;
		border-radius: 20px 20px 20px;
		line-height: 180%;
		background-color: #3B3B3B;
		color: white;
		font-size: 13px;
	}
	 .indicator {
		 @include flex(row);
		 justify-content: center;
 
		 &__dot {
			  height: 6px;
			  width: 6px;
			  border-radius: 100px;
			  background-color: rgba(255, 255, 255, 0.35);
			  margin: 0 5px;
			  transition: background-color 0.3s;
	 
			 &--active {
				  background-color: #ffffff;
			  }
		 }
	 }
 
	 .indicator-num {
		 padding: 2px 0;
		 background-color: rgba(0, 0, 0, 0.35);
		 border-radius: 100px;
		 width: 35px;
		 @include flex;
		 justify-content: center;
 
		 &__text {
			  color: #FFFFFF;
			  font-size: 12px;
		  }
	 }
</style>
